<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { useProductStore } from '@/stores/productStore'

// 状态定义
const productStore = useProductStore()
const statistics = ref([]) // 统计数据
const chartRef = ref(null) // 图表容器的引用
let chart = null // ECharts
const loading = ref(false) // 加载状态

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const response = await productStore.fetchProductData()
    statistics.value = [
      { label: '总用户数', value: response.totalUsers },
      { label: '活跃用户', value: response.activeUsers },
      { label: '总订单数', value: response.totalOrders },
      { label: '待处理订单', value: response.pendingOrders }
    ]
    if (response.weeklyStats) {
      initChart(response.weeklyStats)
    }
  } catch (error) {

  } finally {
    loading.value = false
  }
}

// 初始化图表
const initChart = (data) => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    const option = {
      tooltip: {//图表上的提示框
        trigger: 'axis'
      },
      grid: {//网格样式
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: data.labels,
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} 单'
        }
      },
      series: [{
        name: '数据量',
        type: 'line',
        smooth: true,
        data: data.values,
        areaStyle: {
          opacity: 0.2
        },
        symbol: 'circle',
        symbolSize: 8
      }]
    }
    chart.setOption(option)
  }
}

// 组件卸载时清理图表实例
onBeforeUnmount(() => {
  if (chart) {
    chart.dispose()
  }
})

// 监听窗口大小变化
window.addEventListener('resize', () => {
  if (chart) {
    chart.resize()
  }
})

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="page-container" v-loading="loading">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-item">
            <div :class="['stat-value', `stat-value-${index}`]">{{ item.value }}</div>
            <div class="stat-label">{{ item.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span class="title">周数据统计</span>
        </div>
      </template>
      <div ref="chartRef" class="chart-container"></div>
    </el-card>
  </div>
</template>

<style scoped>
.stat-card {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  margin-bottom: 8px;
}

.chart-container {
  height: 400px;
}

/* 统计值的不同颜色 */
.stat-value-0 { color: #409eff; }
.stat-value-1 { color: #67c23a; }
.stat-value-2 { color: #e6a23c; }
.stat-value-3 { color: #f56c6c; }
</style>
